<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Canvas Click Through</title>  
    <style>  
        #canvas {  
            position: absolute;  
            top: 0;  
            left: 0;  
        }  
        #div-below {  
            position: relative;  
            width: 200px;  
            height: 200px;  
            background-color: lightblue;  
        }  
    </style>  
</head>  
<body>  
    <canvas id="canvas" width="500" height="500"></canvas>  
    <div id="div-below">Click Me</div>  
  
    <script>  
        const canvas = document.getElementById('canvas');  
        const divBelow = document.getElementById('div-below');  
        const rect = divBelow.getBoundingClientRect();  
  
        canvas.addEventListener('click', (event) => {  
            const x = event.clientX;  
            const y = event.clientY;  
  
            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {  
                // 手动触发下方 div 的点击事件  
                const clickEvent = new MouseEvent('click', {  
                    bubbles: true,  
                    cancelable: true,  
                    view: window  
                });  
                divBelow.dispatchEvent(clickEvent);  
            }  
        });  
  
        divBelow.addEventListener('click', () => {  
            alert('Div Below Clicked!');  
        });  
    </script>  
</body>  
</html>